// const { install } = require("element-plus");
// 检测目标元素可见性
import { useIntersectionObserver } from '@vueuse/core'
// 引入懒加载指定插件
 
export  const  lazyPlugin= {
    install(app) {
// 懒加载逻辑指令
/**
 * 懒加载步骤-懒加载图片
 * 1.定义全局指令app.directive('img-lazy',)
 * 2.给指定的img赋值 v-img-lazy
 * 3.在自定全局命令中，在实例挂载阶段mounted 使用useIntersectionObserver 检测目标元素可见性
 * 4.如果目标元素在当前页面可见，那么给这个图片的img.src赋值，传递图片的url
 * 即可完成图片的懒加载
 * 
 */


app.directive('img-lazy', {
    /**
   * el:指令绑定的那个元素 img
   *  binding:binding.value 指令后面绑定的表达式的值 图片url
   * 
   */

    mounted(el, binding) {
        const { stop } = useIntersectionObserver(
            el,
            ([entry], observerElement) => {
                if (entry.isIntersecting) {
                    el.src = binding.value;
                    // 在第一次赋值监听之后就停止
                    stop();
                } else {
                }

            },
        )

    }
})

    }
}